<template>
  <div class="mod-prod-info">
    <el-form>
      <el-form-item label="产品图片" label-width="100px">
        <div>
          <div>
            <el-upload
              :action="thedata222"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :limit="2"
              style="float: left"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="状态" label-width="100px">
        <template>
          <el-radio v-model="radio" label="1">上架</el-radio>
          <el-radio v-model="radio" label="2">下架</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="产品分类" label-width="100px">
        <template>
          <div class="block">
            <el-cascader
              :options="options"
              v-model="val"
              :props="{ checkStrictly: true, expandTrigger: 'hover' }"
              clearable
            ></el-cascader>
          </div>
        </template>
      </el-form-item>
      <el-form-item label="产品分组" label-width="100px">
        <template>
          <el-select
            style="width: 250px"
            v-model="value1"
            multiple
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="产品名称" label-width="100px">
        <template>
          <el-input
            style="width: 33%"
            placeholder="产品名称"
            v-model="proName"
          ></el-input>
        </template>
      </el-form-item>
      <el-form-item label="产品卖点" label-width="100px">
        <template>
          <el-input
            style="width: 33%"
            type="textarea"
            :rows="3"
            placeholder="产品卖点"
            v-model="textarea"
          >
          </el-input>
        </template>
      </el-form-item>
      <el-form-item label="配送方式" label-width="100px">
        <template>
          <el-checkbox v-model="checked1">商家配送</el-checkbox>
          <el-checkbox v-model="checked2">用户自提</el-checkbox>
        </template>
      </el-form-item>
      <div v-if="checked1 == true">
        <el-form-item label="运费设置" label-width="100px">
          <template>
            <el-select v-model="value2" placeholder="请选择" @change="tranInfo">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-table style="width: 100%" :data="table">
            <el-table-column label="配送区域" width="350">
              <template slot-scope="scope">
                <span v-if="scope.row.cityList.length == 0">所有地区</span>
                <el-tag v-else></el-tag>
              </template>
            </el-table-column>
            <el-table-column label="首件(个)" width="169">
              <template slot-scope="scope">
                <span>{{ scope.row.firstPiece }}</span>
              </template>
            </el-table-column>
            <el-table-column label="运费(元)" width="168">
              <template slot-scope="scope">
                <span>{{ scope.row.firstFee }}</span>
              </template>
            </el-table-column>
            <el-table-column label="续件(个)" width="168">
              <template slot-scope="scope">
                <span>{{ scope.row.continuousPiece }}</span>
              </template>
            </el-table-column>
            <el-table-column label="续费(元)" width="168">
              <template slot-scope="scope">
                <span>{{ scope.row.continuousFee }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label-width="100px" v-if="this.trans.length !== 0">
          <el-table style="width: 100%">
            <el-table-column label="指定区域" width="350">
              <!-- <template slot-scope="scope">
                <el-tag>
                  {{ scope.row.areaName }}
                </el-tag>
              </template> -->
              <div v-for="(item, index) in this.trans" :key="index">
                <el-tag>{{ index }}</el-tag>
              </div>
            </el-table-column>
            <el-table-column label="包邮条件" width="330">
              <span>满件/重量/体积包邮</span>
            </el-table-column>
            <el-table-column label="" width="330">
              <span>满件/重量/体积包邮</span>
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="商品规格" label-width="100px">
          <el-button>
            <span>添加规格</span>
          </el-button>
        </el-form-item>
        <el-form-item label="规格名" label-width="100px">
          <el-select @change="specChange" v-model="value3" placeholder="请选择">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格值" label-width="100px">
          <el-select multiple v-model="value4" placeholder="请选择">
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      iconUrl: "", // 上传图片参数
      radio: "1",
      options: [],
      val: [],
      cate: [],
      cateChild: [],
      //
      options1: [],
      value1: "",
      tag: [],
      proName: "",
      //
      textarea: "",
      //
      checked1: false,
      checked2: false,
      options2: [],
      value2: "",
      //
      table: [],
      city: [],
      trans: [],
      // tags:
      options3: [],
      value3: "",
      options4: [],
      value4: "",
    };
  },
  created() {
    this.thedata222 =
      "http://admin.yami.byesame.com/apis/admin/file/upload/element";
  },
  mounted() {
    this.listCate();
    this.tagList();
    this.tranShop();
    this.spec();
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      this.response = response.url;
    },
    listCate() {
      this.$http.get("apis/prod/category/listCategory").then((res) => {
        this.cate = res.data;
        // console.log(this.cate);
        for (let i = 0; i < this.cate.length; i++) {
          if (this.cate[i].parentId == 0) {
            // console.log(this.cate[i].categoryId);
            // console.log(this.cate[i].categoryName);
            let aaa = {
              value: this.cate[i].categoryId,
              label: this.cate[i].categoryName,
            };
            // console.log(aaa);
            for (let j = 0; j < this.cate.length; j++) {
              if (
                this.cate[j].parentId == aaa.value &&
                aaa.children !== false
              ) {
                this.$set(aaa, "children", []);
              }
              if (this.cate[j].parentId == aaa.value) {
                let bbb = {
                  value: this.cate[j].categoryId,
                  label: this.cate[j].categoryName,
                };
                // console.log(bbb);
                this.cateChild.push(bbb);
              }
            }
            // console.log(aaa);

            if (aaa.children == false) {
              aaa.children = this.cateChild;
            }
            this.options.push(aaa);

            // console.log(aaa);

            // aaa.children.push(bbb);
            // console.log(aaa);
          }
        }
        let e = this.options;

        // console.log(this.options);
      });
    },
    tagList() {
      this.$http.get("apis/prod/prodTag/listTagList").then((res) => {
        // console.log(res);
        this.tag = res.data;
        for (let i = 0; i < this.tag.length; i++) {
          let a = { value: this.tag[i].id, label: this.tag[i].title };
          // console.log(a);
          this.options1.push(a);
        }
        // console.log(this.options1);
      });
    },
    tranShop() {
      this.$http.get("apis/shop/transport/list").then((res) => {
        // console.log(res);
        for (let i = 0; i < res.data.length; i++) {
          let a = {
            value: res.data[i].transportId,
            label: res.data[i].transName,
          };
          // console.log(a);
          this.options2.push(a);
        }
        // console.log(this.options2);
      });
    },
    tranInfo(e) {
      // console.log(e);
      this.$http.get("apis/shop/transport/info/" + e).then((res) => {
        // console.log(res);
        if (res.data.transfeeFrees.length == 0) {
          this.trans = res.data.transfeeFrees;
          this.table = res.data.transfees;
          for (let i = 0; i < this.table.length; i++) {
            this.city.push(this.table[i].cityList);
          }
          // console.log(this.city);

          // console.log(this.table);
        } else {
          this.trans = res.data.transfeeFrees[0].freeCityList;
          for (let i = 0; i < this.trans.length; i++) {
            let a = this.trans[i].areaName;
          }

          this.table = res.data.transfees;
        }
      });
    },
    spec() {
      this.$http.get("apis/prod/spec/list").then((res) => {
        console.log(res);
        for (let i = 0; i < res.data.length; i++) {
          this.options3.push({
            value: res.data[i].propId,
            label: res.data[i].propName,
          });
        }
        console.log(this.options3);
      });
    },
    specChange(e) {
      console.log(e);
      this.$http.get("apis/prod/spec/listSpecValue/"+e).then((res)=>{
        console.log(res);
        this.options4 = []
        for(let i=0;i<res.data.length;i++){
          this.options4.push({
            value:res.data[i].valueId,
            label:res.data[i].propValue
          })
        }
        console.log(this.options4);
        
      })
    },
  },
};
</script>

<style>
</style>